<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.test{
/*    padding:5px;
    margin:10px;*/
    color:#fff;
/*    border:7px solid #000;*/
    background-color:#CC66FF;
}
#inner{
/*    position:relative;*/
    width:300px;
    height:300px;    
    padding:50px;
}

#target{
/*    position:absolute;*/
/*    left:3px;
    top:9px;*/
    width:100px;
    height:100px;
    border: 1px solid #ccc;
}
#outer{
    position:relative;
    width:300px;
    height:300px;    
    padding:50px;
}
</style>
<script type="text/javascript">

window.onload = function(){
    var target = document.getElementById('target');
    console.log(target.offsetLeft,target.offsetTop);    //13 = margin-10px + left-3px


    var prv = target.offsetLeft;
    var curr = target.offsetParent;

    while (curr !== null) {
        prv += curr.offsetLeft;
        curr = curr.offsetParent;
    }
    console.log(prv)
};
</script>
</head>

<body>
<div id="outer" class="test">
    <div id="inner">
        <div id="target" class="test">Target<br />rainman</div>
    </div>
</div>
</body>
</html>